/*
    * @module:views/budget/investBudget/modulationTotal
    * @author:silas
    * @date:2021-02-28
    * 预算下达
*/
<template>
    <div class="budgetRelease_container">
        <el-form :inline="true" :model="form" label-width="60px" class="m10">
            <el-form-item label="区域" v-if="lvl == 2">
                <dx-cascader :area_id.sync="form.areaId" :maxLevel="2" />
            </el-form-item>
            <el-form-item label="年度">
                <el-date-picker
                    size="mini"
                    v-model="form.year"
                    value-format="yyyy"
                    type="year"
                    placeholder="选择年"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="调整专项" label-width="120" v-if="lvl == 2">
                <el-select v-model="form.specialId" size="mini" clearable>
                    <el-option
                        v-for="(it, i) in idList"
                        :key="i"
                        :label="it.specialName"
                        :value="it.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                {{ !form.flag ? "分专业" : "分专项" }}
                <el-switch v-model="form.flag"></el-switch>
                <el-checkbox v-model="form.checked" style="margin-left: 20px"
                    >明细数据</el-checkbox
                >
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="handle_search()"
                    >查询</el-button
                >
                <el-button size="mini" type="orange" @click="handle_export()"
                    >导出</el-button>
            </el-form-item>
        </el-form>
        <div>
            <p class="g-unit">单位: 万元</p>
            <div class="tableBox" v-if="checked">
                <el-table
                    border
                    stripe
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    height="73vh"
                    ref="tables"
                    id="table"
                >
                    <el-table-column
                        min-width="120"
                        :label="form.flag ? '分专项' : '分专业'"
                        prop="indexName"
                    ></el-table-column>
                    <el-table-column
                        v-for="(it, i) in titles"
                        :key="i"
                        :label="it.name"
                    >
                        <el-table-column
                            width="90"
                            v-for="(item, index) in it.children"
                            :key="index"
                            :label="item.label"
                            :prop="item.value"
                        ></el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <div class="tableBox" v-if="!checked">
                <el-table
                    border
                    stripe
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    height="73vh"
                    id="table"
                >
                    <el-table-column
                        min-width="120"
                        :label="form.flag ? '分专项' : '分专业'"
                        prop="indexName"
                    ></el-table-column>
                    <el-table-column
                        min-width="90"
                        v-for="(it, i) in titles"
                        :key="i"
                        :label="it.name"
                        :prop="it.children[0].value"
                    >
                        <!-- <template slot-scope="scope">
                            {{scope.row}}
                        </template> -->
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
    data() {
        return {
            form: {
                areaId: "",
                year: this.moment().format("YYYY"),
                specialId: "",
                status: "",
                flag: false,
                checked: false,
            },
            yearList: [],
            tableData: [],
            accountInfo: null,
            tableLoading: false,
            fileList: [],
            param: "",
            lvl: false,
            desc: "",
            idList: [
                {
                    id: "",
                    specialName: "全部",
                },
            ],
            titles: [],
            checked: false,
        };
    },
    watch: {
        "form.year"(newValue, oldValue) {
            var that = this;
            console.log(newValue, oldValue)
            $budgetAPI.getIDList(
                {
                    acctYear: that.form.year,
                },
                (res) => {
                    that.idList = [{
                        id: "",
                        specialName: "全部",
                    }, ...res.content];
                }
            );
        }
    },
    mounted() {},
    methods: {
        init() {
            var that = this;

            that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            that.form.areaId = that.accountInfo.areaId;
            that.lvl = that.accountInfo.areaLvl;
            that.getInitData();
        },
        // 初始化
        async getInitData() {
            let that = this,
                list;
            // that.yearList = await that.getReleaseMonths();
            list = await that.getIdList();
            that.idList = [{
                    id: "",
                    specialName: "全部",
                }, ...list];
            that.getList();
        },
        getList() {
            var that = this,
                titles = [];

            that.tableData = [];
            that.titles = [];
            $budgetAPI.getJiLuRecordSummary(
                {
                    areaId: that.form.areaId,
                    acctYear: that.form.year,
                    specialId: that.form.specialId,
                    flag: +that.form.flag,
                    token: getCookie("token"),
                },
                (res) => {
                    res.content.data.map((it) => {
                        it.detailList.map((item, i) => {
                            it["indexValue" + i] = item.indexValue;
                            it["modifyValue" + i] = that.form.checked ? item.modifyValue : item.resultValue;
                            it["diffValue" + i] = item.diffValue;
                        });
                    });
                    // 下达 indexValue  调整 modifyValue 偏差 diffValue
                    that.checked = that.form.checked;
                    that.form.checked
                        ? res.content.names.map((it, i) => {
                              var obj = {
                                  name: it,
                                  children: [
                                      {
                                          value: "indexValue" + i,
                                          label: "下达",
                                      },
                                      {
                                          value: "modifyValue" + i,
                                          label: "调整",
                                      },
                                      {
                                          value: "diffValue" + i,
                                          label: "偏差",
                                      },
                                  ],
                              };
                              titles.push(obj);
                          })
                        : res.content.names.map((it, i) => {
                              var obj = {
                                  name: it,
                                  children: [
                                      {
                                          value: "modifyValue" + i,
                                          label: "调整",
                                      },
                                  ],
                              };
                              titles.push(obj);
                          });
                    that.titles = titles;
                    that.tableData = res.content.data;
                    // that.$nextTick(() => {
                    //     that.$refs && that.$refs.tables.doLayout();
                    // });
                }
            );
        },
        getIdList() {
            var that = this;

            return new Promise((resolve) => {
                $budgetAPI.getIDList(
                    {
                        acctYear: that.form.year,
                    },
                    (res) => {
                        resolve(res.content);
                    }
                );
            });
        },
        handle_search() {
            var that = this;

            that.getList();
        },
        handle_export() {
            var xlsxParam = {
                raw: true,
            }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(
                document.querySelector("#table"),
                xlsxParam
            );

            XLSX.utils.book_append_sheet(workbook, ws1, "预算调整汇总");
            let wbout = XLSX.write(workbook, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream;charset=utf-8"',
                    }),
                    "预算调整汇总.xlsx"
                );
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbOut);
            }
            return wbout;
        },
    },
};
</script>
<style lang="scss" scoped>
.g-footer {
    display: flex;
}
</style>